<script setup>
import { ref, watch } from 'vue'
import MultiGallery from './components/multigallery/index.vue'

const images =  [
  {
    src:'http://xinfa.test.wx.shmqzn.com:88/xinfa_files/20240229/10ddb811f3d249c5ac636347f436ae46.mp4',
    width: 0,
    height: 0,
    duration: 5,
    type: 'video',
  },
  {
    src:'https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg',
    width: 0,
    height: 0,
    duration: 5,
    type: 'image',
  },
  {
    src:'https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg',
    width: 0,
    height: 0,
    duration: 5,
    type: 'image',
  },
  {
    src:'https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg',
    width: 0,
    height: 0,
    duration: 5,
    type: 'image',
  },
  {
    src:'https://cdn.photoswipe.com/photoswipe-demo-images/videos/1/video.mp4',
    width: 0,
    height: 0,
    duration: 5,
    type: 'video',
  },
  {
    src:'https://cdn.photoswipe.com/photoswipe-demo-images/videos/2/video.mp4',
    width: 0,
    height: 0,
    duration: 5,
    type: 'video',
  },
]
const galleryRef = ref(null)
const currentIndex = ref(0)
const onChange = (index) => {
  console.log('outside-onChange', index)
  currentIndex.value = index
}

// 暂停当前资源
const pauseSlide = () => {
  if (galleryRef.value) {
    galleryRef.value.manageSlide(false) // false 表示暂停
  }
};

// 播放当前资源
const playSlide = () => {
  if (galleryRef.value) {
    galleryRef.value.manageSlide(true) // true 表示播放
  }
}

// 跳转到指定索引的资源
const goToSlide = () => {
  const index = parseInt(document.getElementById("indexInput").value) || 0;
  if (galleryRef.value && !isNaN(index)) {
    galleryRef.value.gotoSlide(index);
  }
}
</script>

<template>
  <MultiGallery
      :images="images" galleryID="my-test-gallery"
      :psw="960"
      :psh="540"

      :bgOpacity="0.5"
      :showNavigation="false"
      :showArrow="true"
      :navigationStyle="{
        size: 30,
        color: 'white',
        activeColor: 'red',
        spacing: 10
      }"
      :useChanged="true"
      @changed="onChange"

      ref="galleryRef"
  />
  <!-- 控制按钮 -->
  <div style="margin-top: 20px; text-align: center;">
    <button @click="pauseSlide">暂停</button>
    <button @click="playSlide">播放</button>
  </div>
  <!-- 跳转控制 -->
  <div style="margin-top: 20px; text-align: center;">
    <label for="indexInput">跳转到索引：</label>
    <input id="indexInput" type="number" min="0" :max="images.length - 1" placeholder="输入索引"><br/>
    <button @click="goToSlide">跳转</button>
    <p>当前索引：{{ currentIndex }}</p>
  </div>
</template>

<style scoped>
button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
input{
  width: 70px;
}

</style>